<script setup lang="ts">
import NavVideoCom from '@/components/video/NavVideoCom.vue';


</script>

<template>

    <van-config-provider theme="dark">
        <div class="content-video">
            <van-image
                src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%8E%A8%E8%8D%90%E8%A7%86%E9%A2%91/u1914.png" />
            <NavVideoCom />

            <div class="aside">
                <van-image
                    src="https://cdn7.axureshop.com/demo2024/2251242/images/%E8%A7%86%E9%A2%91_%E6%9C%AA%E7%99%BB%E5%BD%95/u238.svg" />

                <div class="follow">
                    <van-image
                        src="https://cdn7.axureshop.com/demo2024/2251242/images/%E8%A7%86%E9%A2%91_%E6%9C%AA%E7%99%BB%E5%BD%95/u277.svg" />
                </div>
                <div class="collect‌">
                    <svg t="1731315304044" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6455" width="40" height="40">
                        <path
                            d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z"
                            fill="#ffffff" p-id="6456"></path>
                    </svg>
                    <p>3.1万</p>
                </div>
                <div class="commit">
                    <svg t="1731315442842" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="7574" width="40" height="40">
                        <path
                            d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667z"
                            fill="#ffffff" p-id="7575"></path>
                    </svg>
                    <p>1049</p>
                </div>
                <div class="forward">
                    <svg t="1731315478513" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="8688" width="40" height="40">
                        <path
                            d="M919.272727 416.581818L607.418182 79.127273c-11.636364-11.636364-32.581818-11.636364-44.218182 0-6.981818 6.981818-9.309091 16.290909-9.309091 25.6v181.527272c-258.327273 0-465.454545 207.127273-465.454545 463.127273 0 62.836364 13.963636 125.672727 39.563636 183.854546 37.236364-193.163636 221.090909-339.781818 425.890909-339.781819v181.527273c-2.327273 9.309091 2.327273 18.618182 9.309091 25.6 4.654545 6.981818 13.963636 9.309091 23.272727 9.309091s18.618182-4.654545 23.272728-11.636364L919.272727 465.454545c6.981818-6.981818 9.309091-13.963636 9.309091-23.272727s-4.654545-18.618182-9.309091-25.6z"
                            p-id="8689" fill="#ffffff"></path>
                    </svg>
                    <p>2249</p>
                </div>
            </div>

            <div class="dec">
                <p>@小妞爱游荡</p>
                <p>
                    <van-text-ellipsis rows="4"
                        content="来湖南衡阳旅游必打卡的景点 #周边游安心好去处 #城市骑行记 #逛展撒谎精斯卡哈阿斯加德收看大师课阿萨德那谁叫你阿圣诞节啊刷卡机还贷款啊数据库等不及阿克苏"
                        expand-text="展开" collapse-text="收起" />

                </p>
            </div>
        </div>
    </van-config-provider>
</template>

<style scoped lang="scss">
.content-video {
    width: 100%;

    .van-image {
        width: 100%;
        height: 640px;
        position: relative;
        bottom: 20px;
    }


    .aside {
        position: absolute;
        top: 270px;
        right: 10px;

        .follow {
            width: 36px;
            height: 15px;
            background: linear-gradient(90deg, rgba(52, 120, 246, 1) 0%, rgba(2, 167, 240, 1) 99%);
            position: relative;
            bottom: 28px;
            left: 2px;

            .van-image {
                width: 22px;
                height: 11px;
                position: absolute;
                top: 3px;
                left: 7px;

            }
        }

        .van-image {
            width: 50px;
            height: 50px;
            position: relative;
            right: 5px;
        }

        p {
            color: white;
            font-size: 12px;
            position: relative;
            left: 8px;
            bottom: 8px;

        }
    }

    .dec {
        width: 65%;
        position: absolute;
        top: 460px;
        left: 10px;
        color: white;
        font-size: 14px;
    }

}
</style>